<template>
	<view class="page">
		<!-- <demo-block title="json用法">
			<image :src="picture" v-if="picture" mode="widthFix"></image>
			<l-painter :board="poster" @success="picture = $event" isCanvasToTempFilePath ref="json" style="position: fixed;left: 1500rpx;width: 750rpx;" path-type="url"></l-painter>
		</demo-block> -->
		<!-- <demo-block title="基础用法">
			<l-painter ref="painter">
				<l-painter-view css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block">
				</l-painter-view>
				<l-painter-view
					css="background: #1989fa; height: 120rpx; width: 120rpx; border-top-right-radius: 60rpx; border-bottom-left-radius: 60rpx; display: inline-block; margin: 0 30rpx;">
				</l-painter-view>
				<l-painter-view
					css="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block">
				</l-painter-view>
			</l-painter>
		</demo-block> -->
		<!-- <demo-block title="View 容器">
			<l-painter>
				<l-painter-view css="background: #f0f0f0; padding-top: 100rpx;">
					<l-painter-view css="background: #d9d9d9; width: 33.33%; height: 100rpx; display: inline-block">
					</l-painter-view>
					<l-painter-view css="background: #bfbfbf; width: 66.66%; height: 100rpx; display: inline-block">
					</l-painter-view>
				</l-painter-view>
			</l-painter>
		</demo-block> -->
		<!-- <demo-block title="Text 文本">
			<l-painter>
				<l-painter-view css="background: #f5f5f5; padding: 30rpx; color: #222a29">
					<l-painter-text text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼" />
					<l-painter-text text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
						css="text-align:center; padding-top: 20rpx; text-decoration: line-through " />
					<l-painter-text text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼" css="text-align:right; padding-top: 20rpx" />
					<l-painter-text text="水调歌头\n明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。"
						css="line-clamp: 3; padding-top: 20rpx; background: linear-gradient(,#ff971b 0%, #1989fa 100%); background-clip: text" />
				</l-painter-view>
			</l-painter>
		</demo-block> -->
<!-- 		<demo-block title="Image 图片">
			<l-painter>
				<l-painter-view>
					<l-painter-text text="基础用法"
						css="margin-top: 30rpx; display: block; padding-bottom:20rpx; color: #999" />
					<l-painter-view>
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx" />
					</l-painter-view>
				</l-painter-view>
				<l-painter-view>
					<l-painter-text text="填充方式"
						css=" margin-top: 30rpx; display: block; padding-bottom:20rpx; color: #999" />
					<l-painter-view css="display: inline-block; padding-right: 12rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: contain; background: #f5f5f5" />
						<l-painter-text text="contain" css="margin-top: 10rpx; display: block; text-align:center;" />
					</l-painter-view>
					<l-painter-view css="display: inline-block; padding: 0 12rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: cover; background: #f5f5f5" />
						<l-painter-text text="cover" css="margin-top: 10rpx; display: block; text-align:center;" />
					</l-painter-view>
					<l-painter-view css="display: inline-block; padding: 0 12rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: fill; background: #f5f5f5" />
						<l-painter-text text="fill" css="margin-top: 10rpx; display: block; text-align:center;" />
					</l-painter-view>
					<l-painter-view css="display: inline-block; margin-top: 30rpx">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="width: 200rpx; height: 200rpx; object-fit: none; background: #f5f5f5" />
						<l-painter-text text="none" css="margin-top: 10rpx; display: block; text-align:center;" />
					</l-painter-view>
				</l-painter-view>
			</l-painter>
		</demo-block> -->
		<!-- <demo-block title="QRcode 二维码">
			<l-painter>
				<l-painter-qrcode text="limeui.qcoon.cn" css="width: 200rpx; height: 200rpx" />
			</l-painter>
		</demo-block> -->
		<demo-block title="栗子海报">
		<image v-if="picture2" :src="picture2" mode="widthFix"></image>
		<l-painter v-if="true" pixel-ratio="2" css="width: 650rpx;background: linear-gradient(180deg,#ffe45c 0%, #ffac70 100%);border-radius: 20rpx; overflow: hidden;" 
				@fail="fail"
				@done="done"
				pathType="url"
				ref="poster"
				performance
				>

			<l-painter-view css="box-sizing: border-box;background: linear-gradient(180deg,#9d3900 0%, #ffac70 100%);box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
				<l-painter-image :src="absUrl('/static/post-head-2.jpg')"  css="object-fit: cover; object-position: 50% 50%; width: 100%;"/>

				
				<l-painter-view css="margin:0 10rpx 10rpx;padding:20rpx;background-color:white;border-radius:5px">
					<l-painter-view css="display: flex;">
						<l-painter-text css="width:100%;box-sizing: border-box; line-clamp: 2; color: #333333; font-size: 32rpx;font-weight:bold;text-align: center;"
							text="乐从华美达酒店">
						</l-painter-text>
					</l-painter-view>
					
					<l-painter-view css="display: flex;padding-top:5px;padding-bottom:5px">
						<l-painter-text  style="border-bottom: solid 1rpx #eee;" css="width:100%; box-sizing: border-box; line-clamp: 2; color: #333333; font-size: 28rpx;text-align: center;"
							text="2023年3月31日">
						</l-painter-text>
					</l-painter-view>
					
					<l-painter-view css="height:1px;background-color:#eee;width:100%"></l-painter-view>
					
					<l-painter-view v-for="(index) in 3" css="padding-top:5px;">
						<l-painter-view css="display: flex;justify-content: space-between;padding-top:5px;">
							<l-painter-text text="举牌" css=""/>
							<l-painter-text  css="white-space:nowrap;box-sizing: border-box; color: #333333; font-size: 25rpx;"
								text="上午9:00-下午 14:00">
							</l-painter-text>
						</l-painter-view>
						
						<l-painter-view css="display: flex;padding-top:5px;padding-bottom:5px;display: flex;justify-content: space-between;">
							<l-painter-view css="font-size: 22rpx; color: #8c5400">
								<l-painter-text text="男生" css="margin-right: 16rpx; background: #fff4d9"/>
								<l-painter-text text="170以上" css="margin-right: 16rpx; background: #fff4d9"/>
							</l-painter-view>
							
							<l-painter-view css="color: #FF0000; font-weight: bold; font-size: 25rpx; line-height: 1em;">
								<l-painter-text text="17元/小时/日结" css="vertical-align: bottom"/>
							</l-painter-view>
						</l-painter-view>
						
						<l-painter-view css="height:1px;background-color:#eee;width:100%"></l-painter-view>
					</l-painter-view>
					
					
					<l-painter-view css="margin-top: 10rpx;display:flex;justify-content:flex-end;">
						<l-painter-view css="display:flex;align-items:flex-end;">
							<l-painter-view css="width:130px;height:26px">
								<l-painter-text uid="tag" css="position:absolute; top: 6rpx; padding: 5rpx 10rpx; color: #212121; background: #ffb400; font-size: 24rpx" text="长按点击二维码报名"></l-painter-text>
							</l-painter-view>
							<l-painter-view css="">
								<l-painter-qrcode css="width: 100rpx; height: 100rpx;" text="limeui.qcoon.cn"></l-painter-qrcode>	
							</l-painter-view>
						</l-painter-view>
					</l-painter-view>
				</l-painter-view>
			</l-painter-view>
		</l-painter>
		
		<view style="margin: 10px;">
			<view @click="save" style="display: flex;justify-content: center;align-items: center;background-color:#ee8b00;padding:15px 100px;border-radius: 5px;color:white;font-size:28rpx">
				保存至相册
			</view>
		</view>
	</demo-block>
	</view>
</template>

<script>
	export default {
		data: () => ({
			picture: '',
			picture2: '',
			show: false,
			"poster": {
					"css": {
						"width": "750rpx",
						"height": "1333rpx"
					},
					"views": [{
						"type": "image",
						"src": "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
						"css": {
							"width": "750rpx",
							"height": "1333rpx",
							"background": "white",
							"position": "fixed",
							"top": "0",
							"left": "0",
							"zIndex": -1
						}
					}, {
						"css": {
							"width": "750rpx",
							"position": "fixed",
							"top": "610rpx",
							"left": "303rpx"
						},
						"views": [{
							"type": "view",
							"css": {
								"width": "150rpx",
								"height": "150rpx",
								"background": "#FFF"
							},
							"views": [{
								"type": "image",
								"src": "",
								"css": {
									"width": "138rpx",
									"height": "138rpx",
									"marginTop": "6rpx",
									"marginLeft": "6rpx"
								}
							}]
						}]
					}]
				},
		}),
		methods: {
			close() {
				this.show = false
			},
			fail(v) {
				console.log(v)
			},
			done(v) {
				console.log('绘制完成:')
			},
			save() {
				this.$refs.poster.canvasToTempFilePathSync({
					fileType: 'jpg',
					quality: 0.7,
					success: (res) => {
						console.log(res.tempFilePath)
						this.picture = res.tempFilePath
						console.log(res.tempFilePath)
						this.saveImage()
					},
					fail(e) {
						console.log('???????????',e)
					}
				})
			},
			// 保存图征
			saveImage() {
				this.$emit('save',this.picture)
			}
		}
	};
</script>

<style  scoped>
	.page {
		background-color: transparent; 
	}
</style>
